<!-- 聊天输入组件 -->
<template>
  <view @click.stop class="chat-input-container">
    <!-- 输入区域 -->
    <view class="input-area">
      <!-- 更多功能按钮 -->
      <view class="tool-btn" @tap="toggleToolPanel">
        <text class="tn-icon-add tool-icon"></text>
      </view>

      <view class="input-container">
        <input class="message-input" v-model="inputMessage" type="text"
          :adjust-position="false" confirm-type="send" :focus="focus"
          placeholder="请输入消息..." @confirm="sendTextMessage" />
      </view>

      <!-- 表情按钮 -->
      <view class="emoji-btn" @tap="toggleEmojiPanel">
        <text :class="['emoji-icon', showEmojiPanel ? 'tn-icon-keyboard' : 'tn-icon-emoji-good']"></text>
      </view>

      <view :class="['send-btn', inputMessage.trim() ? 'active' : '']" @tap="sendTextMessage">
        <text>发送</text>
      </view>
    </view>

    <!-- 底部额外内容容器：包含表情面板和工具面板 -->
    <view class="bottom-panels-container">
      <!-- 表情面板 -->
      <view class="emoji-panel-container" :style="{height: showEmojiPanel ? '400rpx' : '0', opacity: showEmojiPanel ? '1' : '0', visibility: showEmojiPanel ? 'visible' : 'hidden'}">
        <scroll-view scroll-y class="emoji-panel-scroll">
          <view class="emoji-panel">
            <view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @tap="insertEmoji(emoji)">
              <view class="emoji-item-inner">
                <text class="emoji-text">{{emoji}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 工具面板 -->
      <view class="tool-panel-container" :style="{height: showToolPanel ? '300rpx' : '0', opacity: showToolPanel ? '1' : '0', visibility: showToolPanel ? 'visible' : 'hidden'}">
        <scroll-view scroll-y class="tool-panel-scroll">
          <view class="tool-panel">
            <view class="tool-panel-item" @tap="handleToolClick('image')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-image tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">图片</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('camera')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-camera tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">拍摄</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('video')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-video tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">视频</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('location')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-map tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">位置</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('file')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-file tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">文件</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('collection')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-star tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">收藏</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('voice')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-voice tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">语音录制</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('contact')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-user tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">名片</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatInput',
  props: {
    // 是否禁用输入
    disabled: {
      type: Boolean,
      default: false
    },
    // 表情列表
    customEmojiList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      inputMessage: '', // 输入框消息
      focus: false, // 输入框聚焦状态
      showEmojiPanel: false, // 是否显示表情面板
      showToolPanel: false, // 是否显示工具面板
      // 默认表情列表
      defaultEmojiList: [
        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
        '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
        '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
        '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
        '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
        '👍', '👎', '👊', '✊', '🤛', '🤜', '🤝', '👏', '🙌', '👐',
        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '❣️', '💕',
        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯'
      ]
    }
  },
  computed: {
    // 使用自定义表情列表或默认表情列表
    emojiList() {
      return this.customEmojiList || this.defaultEmojiList;
    }
  },
  methods: {
    // 发送文本消息
    sendTextMessage() {
      // 如果禁用输入或消息为空，则不发送
      if (this.disabled || !this.inputMessage.trim()) return;

      // 发出发送事件，传递消息内容
      this.$emit('send-text', this.inputMessage);

      // 清空输入框
      this.inputMessage = '';
    },

    // 切换表情面板
    toggleEmojiPanel() {
      // 如果禁用输入，则不处理
      if (this.disabled) return;

      // 如果工具面板已打开，则先关闭工具面板
      if (this.showToolPanel) {
        this.showToolPanel = false;
      }

      this.showEmojiPanel = !this.showEmojiPanel;

      if (this.showEmojiPanel) {
        // 显示表情面板时，隐藏键盘
        this.focus = false;
        uni.hideKeyboard();
      } else {
        // 隐藏表情面板时，显示键盘
        this.focus = true;
      }
    },

    // 插入表情
    insertEmoji(emoji) {
      if (this.disabled) return;
      this.inputMessage += emoji;
    },

    // 切换工具面板
    toggleToolPanel() {
      // 如果禁用输入，则不处理
      if (this.disabled) return;

      // 如果表情面板已打开，则先关闭表情面板
      if (this.showEmojiPanel) {
        this.showEmojiPanel = false;
      }

      this.showToolPanel = !this.showToolPanel;

      if (this.showToolPanel) {
        // 显示工具面板时，隐藏键盘
        this.focus = false;
        uni.hideKeyboard();
      } else {
        // 隐藏工具面板时，显示键盘
        this.focus = true;
      }
    },

    // 处理工具点击
    handleToolClick(tool) {
      // 如果禁用输入，则不处理
      if (this.disabled) return;

      // 发出工具点击事件
      this.$emit('tool-click', tool);

      // 一些工具可能需要关闭工具面板
      if (['image', 'camera', 'video'].includes(tool)) {
        this.showToolPanel = false;
      }
    },

    // 设置焦点
    setFocus(focus = true) {
      this.focus = focus;

      if (focus) {
        // 获取焦点时，关闭面板
        this.showEmojiPanel = false;
        this.showToolPanel = false;
      }
    },

    // 显示键盘
    showKeyboard() {
      this.setFocus(true);
    },

    // 隐藏键盘和面板
    hideAll() {
      this.focus = false;
      this.showEmojiPanel = false;
      this.showToolPanel = false;
      uni.hideKeyboard();
    }
  }
}
</script>

<style lang="scss">
/* 聊天输入容器 */
.chat-input-container {
  position: relative;
  width: 100%;
}

/* 底部额外内容容器 */
.bottom-panels-container {
  position: relative;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}

/* 表情面板容器 */
.emoji-panel-container {
  position: relative;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  overflow: hidden;
  transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  z-index: 12;
  backdrop-filter: blur(10px);
}

/* 表情面板滚动视图 */
.emoji-panel-scroll {
  height: 400rpx;
  overflow-y: auto;
}

/* 工具面板容器 */
.tool-panel-container {
  position: relative;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  overflow: hidden;
  transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  z-index: 11;
  backdrop-filter: blur(10px);
}

/* 工具面板滚动视图 */
.tool-panel-scroll {
  height: 300rpx;
  overflow-y: auto;
}

/* 输入区域 */
.input-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(10px);
}

/* 输入框容器 */
.input-container {
  flex: 1;
  background-color: #2C3039;
  border-radius: 36rpx;
  padding: 16rpx 24rpx;
  border: 1px solid rgba(179, 247, 60, 0.2);
}

/* 消息输入框 */
.message-input {
  width: 100%;
  font-size: 28rpx;
  color: #FFFFFF;
}

/* 发送按钮 */
.send-btn {
  width: 120rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background-color: #444;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  transition: all 0.3s;
}

/* 激活状态的发送按钮 */
.send-btn.active {
  background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
  color: #020303;
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
  transform: scale(1.02);
}

/* 表情面板 */
.emoji-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  justify-content: space-between;
}

/* 表情项 */
.emoji-item {
  width: 20%; /* 改为百分比宽度，每行5个 */
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 6rpx;
  margin-bottom: 10rpx;
}

/* 表情项内部容器 */
.emoji-item-inner {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  background-color: #2C3039;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s, background-color 0.2s;
}

/* 表情项点击效果 */
.emoji-item-inner:active {
  background-color: #3A404B;
  transform: scale(0.95);
}

/* 表情文本 */
.emoji-text {
  font-size: 40rpx;
  line-height: 1;
}

/* 表情按钮 */
.emoji-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
}

/* 表情按钮图标 */
.emoji-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* 工具面板 */
.tool-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}

/* 工具面板项 */
.tool-panel-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 10rpx;
}

/* 工具面板图标容器 */
.tool-panel-icon-box {
  width: 70rpx;
  height: 70rpx;
  border-radius: 12rpx;
  background-color: #2C3039;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rpx;
  border: 1px solid rgba(179, 247, 60, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tool-panel-item:active .tool-panel-icon-box {
  transform: scale(0.95);
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
}

/* 工具面板图标 */
.tool-panel-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* 工具面板文本 */
.tool-panel-text {
  font-size: 24rpx;
  color: #fff;
  margin-top: 4rpx;
}

/* 工具按钮 */
.tool-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
}

/* 工具按钮图标 */
.tool-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}
</style>
